<template>
  <div id="app">
    <router-view v-slot="{ Component, route }">
      <transition
        :name="route.meta.transition || 'fade'"
        mode="out-in"
        appear
      >
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
    
    <!-- 全局加载遮罩 -->
    <el-loading
      v-loading="globalLoading"
      :text="loadingText"
      background="rgba(0, 0, 0, 0.8)"
      element-loading-spinner="el-icon-loading"
      element-loading-svg-view-box="-10, -10, 50, 50"
      body-style="{ overflow: 'hidden' }"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
import { useTagsViewStore } from '@/stores/tagsView'

// 使用store
const appStore = useAppStore()
const tagsViewStore = useTagsViewStore()

// 计算属性
const globalLoading = computed(() => appStore.loading)
const loadingText = computed(() => appStore.loadingText)
const cachedViews = computed(() => tagsViewStore.cachedViews)

// 监听系统主题变化
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const handleThemeChange = (e) => {
  if (appStore.theme === 'auto') {
    document.documentElement.classList.toggle('dark', e.matches)
  }
}

mediaQuery.addEventListener('change', handleThemeChange)

// 初始化主题
const initTheme = () => {
  const theme = appStore.theme
  if (theme === 'dark') {
    document.documentElement.classList.add('dark')
  } else if (theme === 'light') {
    document.documentElement.classList.remove('dark')
  } else {
    // auto模式
    document.documentElement.classList.toggle('dark', mediaQuery.matches)
  }
}

// 页面加载时初始化主题
initTheme()

// 监听主题变化
watch(
  () => appStore.theme,
  () => {
    initTheme()
  }
)

// 页面可见性变化处理
const handleVisibilityChange = () => {
  if (document.hidden) {
    document.title = '🏨 酒店管理系统 - 已最小化'
  } else {
    document.title = '🏨 酒店管理系统'
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange)

// 组件卸载时清理
onUnmounted(() => {
  mediaQuery.removeEventListener('change', handleThemeChange)
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})
</script>

<style lang="scss">
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

// 路由过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-right-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.3s ease;
}

.zoom-enter-from,
.zoom-leave-to {
  transform: scale(0.9);
  opacity: 0;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--el-bg-color-page);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color-darker);
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color-dark);
}

// 暗色模式下的滚动条
.dark {
  ::-webkit-scrollbar-track {
    background: var(--el-bg-color-page);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--el-border-color-light);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--el-border-color);
  }
}

// 全局样式覆盖
.el-loading-mask {
  backdrop-filter: blur(2px);
}

// 响应式设计
@media (max-width: 768px) {
  #app {
    font-size: 14px;
  }
}

// 打印样式
@media print {
  #app {
    background: white !important;
    color: black !important;
  }
  
  .no-print {
    display: none !important;
  }
}
</style>